<?php
session_start();
include_once 'admin/connect.php';
// 完全移除 head.php 的引用
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统更新日志</title>
    <!-- 直接引入所有必要的CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="Style/css/index.css?v=<?php echo time(); ?>">
    <style>
        /* 更新日志页面样式 */
        body {
            background-color: #f5f5f5;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #333;
            padding: 0;
            margin: 0;
        }
        
    .changelog-container {
        max-width: 900px;
        margin: 30px auto;
        padding: 30px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 3px 15px rgba(0,0,0,0.1);
    }
    
        /* 保留原有样式但确保没有冲突 */
    .changelog-title {
        font-size: 32px;
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 10px;
        text-align: center;
    }
    
    .changelog-intro {
        text-align: center;
        color: #666;
        margin-bottom: 30px;
        font-size: 16px;
    }
    
    .changelog-version {
        margin-top: 40px;
        padding-bottom: 30px;
        border-bottom: 1px solid #eee;
    }
    
    .changelog-version:last-child {
        border-bottom: none;
    }
    
    .version-header {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #f0f0f0;
    }
    
    .version-number {
        font-size: 24px;
        font-weight: bold;
        color: #2c3e50;
    }
    
    .version-date {
        margin-left: 15px;
        color: #7f8c8d;
        font-style: italic;
    }
    
    .version-badge {
        margin-left: 15px;
        background-color: #3498db;
        color: white;
        padding: 3px 10px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: bold;
    }
    
    .changelog-section {
        margin-top: 25px;
    }
    
    .changelog-section h3 {
        color: #2c3e50;
        margin-bottom: 20px;
        font-size: 20px;
        font-weight: 600;
        padding-left: 10px;
        border-left: 4px solid #3498db;
    }
    
    .feature-list {
        padding-left: 0;
        list-style: none;
    }
    
    .feature-list > li {
        margin-bottom: 25px;
        display: flex;
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    
    .feature-list > li:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    .feature-icon {
        flex: 0 0 50px;
        height: 50px;
        background-color: #3498db;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        color: white;
        font-size: 20px;
    }
    
    .feature-content {
        flex: 1;
    }
    
    .feature-content strong {
        display: block;
        margin-bottom: 10px;
        font-size: 18px;
        color: #2c3e50;
    }
    
    .feature-content ul {
        padding-left: 20px;
        margin-top: 5px;
    }
    
    .feature-content ul li {
        margin-bottom: 5px;
        line-height: 1.5;
    }
    
    .tech-details {
        background-color: #f8f9fa;
        padding: 20px;
        border-radius: 8px;
        margin-top: 30px;
    }
    
    .tech-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-top: 20px;
    }
    
    .tech-item {
        flex: 1 0 calc(33.333% - 20px);
        min-width: 250px;
        background-color: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    
    .tech-icon {
        width: 40px;
        height: 40px;
        background-color: #2ecc71;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        color: white;
        font-size: 18px;
    }
    
    .tech-item h4 {
        margin-bottom: 10px;
        color: #2c3e50;
        font-size: 16px;
        font-weight: 600;
    }
    
    .tech-item ul {
        padding-left: 20px;
    }
    
    .tech-item li {
        margin-bottom: 5px;
        font-size: 14px;
        color: #555;
    }
    
    .initial-features {
        list-style: none;
        padding-left: 10px;
    }
    
    .initial-features li {
        margin-bottom: 10px;
        font-size: 16px;
        display: flex;
        align-items: center;
    }
    
    .initial-features i {
        color: #2ecc71;
        margin-right: 10px;
        font-size: 18px;
    }
    
        .back-to-home {
        display: inline-block;
        margin-top: 30px;
        padding: 10px 20px;
        background-color: #3498db;
            color: white !important;
            text-decoration: none !important;
        border-radius: 5px;
        transition: background-color 0.3s;
        font-weight: 500;
    }
    
        .back-to-home:hover {
        background-color: #2980b9;
        text-decoration: none;
    }
    
        .back-to-home i {
        margin-right: 5px;
    }
    
    /* 响应式调整 */
    @media (max-width: 768px) {
        .changelog-container {
            padding: 20px;
            margin: 15px;
        }
        
        .tech-item {
            flex: 1 0 100%;
        }
        
        .feature-list > li {
            flex-direction: column;
        }
        
        .feature-icon {
            margin-bottom: 15px;
        }
    }
</style>
</head>
<body>
    <div class="container">
        <div class="changelog-container">
            <h1 class="changelog-title">系统更新日志</h1>
            <p class="changelog-intro">这里记录了系统的所有更新和改进内容，帮助您了解最新功能。</p>
            
            <div class="changelog-version">
                <div class="version-header">
                    <span class="version-number">版本 1.0.2</span>
                    <span class="version-date">(2025-03-24)</span>
                    <span class="version-badge">最新</span>
                </div>
                
                <div class="changelog-section">
                    <h3>主要改进</h3>
                    <ul class="feature-list">
                        <li>
                            <div class="feature-icon"><i class="fa fa-window-maximize"></i></div>
                            <div class="feature-content">
                                <strong>全新编辑器界面</strong>
                                <ul>
                                    <li>重新设计了编辑器界面，采用左侧编辑、右侧大纲的分栏布局</li>
                                    <li>实现了所见即所得的编辑体验，直接显示格式化后的内容</li>
                                    <li>添加了大纲导航功能，自动提取文章标题生成目录</li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <div class="feature-icon"><i class="fa fa-save"></i></div>
                            <div class="feature-content">
                                <strong>本地存储功能</strong>
                                <ul>
                                    <li>添加了自动保存草稿功能，防止刷新页面导致内容丢失</li>
                                    <li>实现了定时保存（每30秒）和编辑时实时保存</li>
                                    <li>添加了草稿管理界面，支持加载和清除草稿</li>
                                    <li>优化了多端适配，确保在移动设备和桌面设备上都能正常工作</li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <div class="feature-icon"><i class="fa fa-keyboard-o"></i></div>
                            <div class="feature-content">
                                <strong>快捷键支持</strong>
                                <ul>
                                    <li>添加了丰富的编辑快捷键，如Ctrl+1~6设置标题级别</li>
                                    <li>支持Ctrl+B（粗体）、Ctrl+I（斜体）、Ctrl+K（链接）等常用快捷键</li>
                                    <li>添加了使用说明按钮，提供快捷键和基本操作指南</li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <div class="feature-icon"><i class="fa fa-wrench"></i></div>
                            <div class="feature-content">
                                <strong>工具栏增强</strong>
                                <ul>
                                    <li>重新设计了工具栏，提供更直观的编辑按钮</li>
                                    <li>添加了常用格式化功能，如标题、粗体、斜体、列表等</li>
                                    <li>优化了图片上传按钮的位置和样式</li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <div class="feature-icon"><i class="fa fa-user"></i></div>
                            <div class="feature-content">
                                <strong>用户体验优化</strong>
                                <ul>
                                    <li>添加了草稿状态提示，显示最近保存时间</li>
                                    <li>改进了编辑区域的样式，提供更舒适的编辑体验</li>
                                    <li>添加了帮助模态框，提供详细的使用说明</li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
                
                <div class="changelog-section tech-details">
                    <h3>技术细节</h3>
                    <div class="tech-grid">
                        <div class="tech-item">
                            <div class="tech-icon"><i class="fa fa-code"></i></div>
                            <h4>编辑器实现</h4>
                            <ul>
                                <li>使用contenteditable实现所见即所得编辑</li>
                                <li>使用TurndownService将HTML转换为Markdown</li>
                                <li>使用marked将Markdown转换为HTML</li>
                            </ul>
                        </div>
                        <div class="tech-item">
                            <div class="tech-icon"><i class="fa fa-database"></i></div>
                            <h4>本地存储机制</h4>
                            <ul>
                                <li>使用localStorage存储草稿数据</li>
                                <li>实现多重保存机制，确保数据安全</li>
                                <li>添加错误处理，防止在不支持localStorage的环境中崩溃</li>
                            </ul>
                        </div>
                        <div class="tech-item">
                            <div class="tech-icon"><i class="fa fa-columns"></i></div>
                            <h4>界面布局</h4>
                            <ul>
                                <li>使用Flexbox实现分栏布局</li>
                                <li>添加自定义CSS样式，优化编辑体验</li>
                                <li>实现响应式设计，适应不同屏幕尺寸</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="changelog-version">
                <div class="version-header">
                    <span class="version-number">版本 1.0.1</span>
                    <span class="version-date">(2025-03-23)</span>
                </div>
                
                <div class="changelog-section">
                    <h3>主要改进</h3>
                    <ul class="feature-list">
                        <li>
                            <div class="feature-icon"><i class="fa fa-upload"></i></div>
                            <div class="feature-content">
                                <strong>统一图片上传功能</strong>
                                <ul>
                                    <li>移除了多余的图片上传按钮，保留了工具栏中最有效的上传按钮</li>
                                    <li>优化了图片上传按钮的样式，使其更加醒目和易于识别</li>
                                    <li>添加了清晰的提示文本，帮助用户理解如何上传图片</li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <div class="feature-icon"><i class="fa fa-image"></i></div>
                            <div class="feature-content">
                                <strong>增强图片上传体验</strong>
                                <ul>
                                    <li>添加了直接粘贴图片功能，支持从剪贴板粘贴图片到编辑器</li>
                                    <li>添加了拖放图片功能，支持将图片文件拖放到编辑器中</li>
                                    <li>改进了图片上传过程中的加载状态指示，提供更好的用户反馈</li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <div class="feature-icon"><i class="fa fa-bug"></i></div>
                            <div class="feature-content">
                                <strong>修复图片显示问题</strong>
                                <ul>
                                    <li>统一了图片URL格式，确保所有图片使用一致的路径格式</li>
                                    <li>修复了前台页面图片无法显示的问题</li>
                                    <li>添加了图片加载失败时的占位图显示</li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="changelog-version">
                <div class="version-header">
                    <span class="version-number">版本 1.0.0</span>
                    <span class="version-date">(初始版本)</span>
                </div>
                
                <div class="changelog-section">
                    <ul class="initial-features">
                        <li><i class="fa fa-check-circle"></i> 基础编辑器功能</li>
                        <li><i class="fa fa-check-circle"></i> 基本的图片上传支持</li>
                        <li><i class="fa fa-check-circle"></i> 文章编辑和保存功能</li>
                    </ul>
                </div>
            </div>
            
            <a href="index.php" class="back-to-home">
                <i class="fa fa-arrow-left"></i> 返回首页
            </a>
        </div>
    </div>

    <!-- 添加必要的JavaScript -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
    // 页面加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
        // 设置一个标记，表示用户访问过更新日志页面
        localStorage.setItem('visitedChangelog', 'true');
        
        // 添加返回首页的事件处理
        document.querySelector('.back-to-home').addEventListener('click', function(e) {
            e.preventDefault();
            // 清除标记，避免影响其他页面
            localStorage.removeItem('visitedChangelog');
            // 跳转到首页
            window.location.href = 'index.php';
        });
        
        // 处理浏览器返回按钮
        window.addEventListener('popstate', function(event) {
            // 当用户点击浏览器返回按钮时，重定向到首页
            window.location.href = 'index.php';
        });
        
        // 添加一个历史记录条目，确保返回按钮可以触发 popstate 事件
        history.pushState({page: 'changelog'}, 'System Changelog', 'changelog.php');
    });
    </script>
</body>
</html> 